<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px" label-position="left">
      <el-form-item label="包装编号" prop="packing_id">
        <el-input
          v-model="queryParams.packing_id"
          placeholder="包装编号"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="包装单位" prop="unit_name">
        <el-input
          v-model="queryParams.unit_name"
          placeholder="包装单位"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-action="'pack@create'"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleCreate({ },'添加')"
        >添加
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="list" style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" width="50" />
      <el-table-column label="ID" align="center" prop="id" width="60" />
      <!-- <el-table-column label="包装档案序列号" align="center" prop="packing_id" /> -->
      <el-table-column label="包装编号" align="center" prop="serial_number" />
      <el-table-column label="包装层级" align="center" prop="_packing_hierarchy" />
      <el-table-column label="包装数量" align="center" prop="_packing_num" />
      <el-table-column label="最小包装数量" align="center" prop="_packing_min_unit" />
      <!-- <el-table-column label="包装单位" align="center" prop="unit_name" />
      <el-table-column label="一托数量" align="center" prop="layup_num" />
      <el-table-column label="包装数量" align="center" prop="packing_num" /> -->
      <el-table-column label="包装条形码" align="center" prop="barcode" />
      <el-table-column v-if="ifAdmain" label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template v-slot="scope">
          <el-button
            v-action="'pack@update'"
            size="mini"
            type="primary"
            :disabled="scope.row.id === 1"
            @click="handleCreate(scope.row,'编辑')"
          >编辑</el-button>
          <el-button
            v-action="'pack@delete'"
            size="mini"
            type="danger"
            :disabled="scope.row.id === 1"
            @click="delPort(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />
    <!-- 新增 -->
    <!--    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>-->
    <!--      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm">-->

    <!--        <el-form-item label="包装单位" prop="unit_id">-->
    <!--          <el-select v-model="form.unit_id" placeholder="请选择包装单位" style="width:100%" @change="changeUnit">-->
    <!--            <el-option-->
    <!--              v-for="(item, index) in unit"-->
    <!--              :key="index"-->
    <!--              :label="item.unit_name"-->
    <!--              :value="item.unit_code"-->
    <!--            />-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->

    <!--        <el-form-item label="托盘可放置的数量" prop="layup_num">-->
    <!--          <el-input-->
    <!--            v-model="form.layup_num"-->
    <!--            placeholder=""-->
    <!--            style="width: 90%;"-->
    <!--          />-->
    <!--          <span style="position: relative;right: 8%;">单位-->
    <!--            <span v-if="form.unit_name">({{ form.unit_name }})</span>-->
    <!--          </span>-->
    <!--        </el-form-item>-->

    <!--        <el-form-item id="packing_a" label="包装数量" prop="packing_num">-->
    <!--          <el-input v-model="form.packing_num" />-->
    <!--        </el-form-item>-->

    <!--        <el-form-item label="包装描述" prop="describe">-->
    <!--          <el-input-->
    <!--            v-model="form.describe"-->
    <!--            type="textarea"-->
    <!--            style="width:90%"-->
    <!--            :rows="2"-->
    <!--            placeholder=""-->
    <!--          />-->
    <!--        </el-form-item>-->

    <!--        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">-->
    <!--          <el-col :span="24">-->
    <!--            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>-->
    <!--            <el-button size="medium" @click="open=false">取消</el-button>-->

    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--      </el-form>-->
    <!--    </el-dialog>-->

    <!--    新增2-->

    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="closeDialog">

      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="托盘放置最小单位" />
        <el-step title="托盘放置数量" />
        <el-step>
          <template v-slot:title>
            <span v-if="form.unit_name">每{{ form.unit_name }}数量</span>
            <span v-else>数量</span>
          </template>
        </el-step>
        <el-step title="包装描述" />
        <el-step title="完成" />
      </el-steps>

      <el-form ref="form" style="margin-top: 20px;" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm">

        <el-form-item v-show="active === 0" label="包装单位" prop="unit_id">
          <el-select v-model="form.unit_id" placeholder="请选择包装单位" style="width:100%" @change="changeUnit">
            <el-option
              v-for="(item, index) in unit"
              :key="index"
              :label="item.unit_name"
              :value="item.unit_code"
            />
          </el-select>
        </el-form-item>

        <el-form-item v-show=" active == 1" label="输入托盘可放置的数量" prop="layup_num">
          <el-input
            v-model="form.layup_num"
            type="number"
            placeholder=""
            style="width: 90%;"
          />
          <span style="position: relative;right: 8%;">单位
            <span v-if="form.unit_name">({{ form.unit_name }})</span>
          </span>
        </el-form-item>

        <el-form-item v-show=" active == 2" id="packing_a" label="包装数量" prop="packing_num">
          <el-input v-model="form.packing_num" type="number" />
        </el-form-item>

        <el-form-item v-show=" active == 3" label="包装描述" prop="describe">
          <el-input
            v-model="form.describe"
            type="textarea"
            style="width:90%"
            :rows="2"
            placeholder=""
          />
        </el-form-item>

        <el-row style="margin-bottom: 30px;text-align:center;">
          <el-col :span="24">
            <el-button v-if="active !=0" @click="perv">上一步</el-button>
            <el-button v-if="active != 4" @click="next">下一步</el-button>

            <el-button v-if="active == 4" type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
            <el-button v-if="active == 4" size="medium" @click="closeDialog">取消</el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-row type="flex" style="text-align: center;">
        <el-col>
          <span v-show="form.unit_name">包装层级：托 / {{ form.unit_name }} / 件</span>
          <span v-show="form.unit_name && form.layup_num && !form.packing_num"> 包装数量：1 / {{ form.layup_num }}</span>
          <span v-show="form.unit_name && form.layup_num && form.packing_num"> 包装数量：1 / {{ form.layup_num }} / {{ form.layup_num * form.packing_num }}</span>
        </el-col>
      </el-row>

    </el-dialog>

  </div>

</template>
<style>
.el-input__inner {
  width: 90%;
}
.el-input__suffix {
  right: 10%;
}
</style>
<script>
import { packList, createPack, updatePack, delPack, getUnit } from '@/api/product'
export default {
  name: 'Index',
  data() {
    return {
      // 遮罩层
      active: 0,
      loading: true,
      open: false,
      title: '',
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      unit: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        packing_id: undefined,
        unit_name: undefined
      },
      form: {},
      show: false,
      ids: [],
      multiple: false,
      rules: {
        unit_id: [
          { required: true, message: '请选择包装单位', trigger: 'change' }
        ],
        packing_num: [
          { required: true, message: '请填写包装数量', trigger: 'blur,change' },
          { pattern: /^[0-9]*$/, message: '请输入正确数值', trigger: 'blur,change' }
        ],
        layup_num: [
          { required: true, message: '请填写托盘可放置的数量', trigger: 'blur,change' },
          { pattern: /^[0-9]*$/, message: '请输入正确数值', trigger: 'blur,change' }
        ]
      },
      ifAdmain: false
    }
  },
  created() {
    this.getList()
    this.getUnit()
    const Array = this.$store.state.user.roles
    Array.forEach(item => {
      if (item === 'admin') {
        this.ifAdmain = true
      } else if (item === 'admin1') {
        this.ifAdmain = true
      } else {
        this.ifAdmain = false
      }
    })
  },
  methods: {
    closeDialog() {
      this.open = false
      this.active = 0
    },
    next() {
      const arr = ['unit_id', 'layup_num', 'packing_num']

      if (this.active == 0) {
        return this.$refs['form'].validateField(['unit_id'], (valid) => {
          if (!valid) {
            ++this.active
          } else {
            return
          }
        })
      }

      if (this.active == 1) {
        return this.$refs['form'].validateField(['layup_num'], (valid) => {
          if (!valid) {
            ++this.active
          } else {
            return
          }
        })
      }

      if (this.active == 2) {
        return this.$refs['form'].validateField(['packing_num'], (valid) => {
          if (!valid) {
            ++this.active
          } else {
            return
          }
        })
      }

      if (this.active == 3) {
        ++this.active
      }

      if (this.active > 4) {
        this.active = 0
      }
      // if (this.active++ > 2) this.active = 0
    },
    perv() {
      if (this.active-- < 0) this.active = 2
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /** 打开 */
    handleCreate(row, title) {
      const that = this

      that.form = row
      that.title = title
      that.open = true
      if (that.$refs['form']) {
        that.$refs['form'].clearValidate()
      }
    },
    getUnit() {
      getUnit({}).then(response => {
        this.unit = response.data
      })
    },
    /** 查询清单列表 */
    getList() {
      this.loading = true
      // console.log(this.queryParams)
      packList(this.queryParams).then(response => {
        console.log(response)
        this.list = response.data
        this.total = response.count
        this.loading = false
      })
    },
    changeUnit(val) {
      let obj = {}
      obj = this.unit.find((item) => {
        return item.unit_code === val
      })
      this.form.unit_name = obj.unit_name
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!that.form.id) {
            createPack(that.form).then(response => {
              // console.log(response)
              that.$message.success(response.message)
              that.open = false
              that.getList()
            })
          } else {
            // console.log(that.form)
            updatePack(that.form).then(response => {
              // console.log(response)
              that.$message.success(response.message)
              that.open = false
              that.getList()
            })
          }
        } else {
          return false
        }
      })
    },
    delPort(row) {
      const that = this
      that.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        delPack({ id: row.id }).then(response => {
          that.$message.success(response.message)
          that.getList()
        })
      }).catch(() => {
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 10,
        packing_id: undefined,
        unit_name: undefined
      }
      this.handleQuery()
    },
    /** 选中的项 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.multiple = !selection.length
    }
  }
}
</script>

